<template>
  <el-dialog
  title="任务变更"
    :close-on-click-modal="false"
    :visible.sync="visible"
    width="50%">
  <div class="main_top">
  <span slot="footer" class="dialog-footer">
    <el-form :model="dataForm" ref="dataForm" label-width="80px">
      <p class="part-title" style="margin-top: 5px;">实验名称</p>
      <el-form-item label="实验名称" prop="experimentName" style="width: 300px;">
        <el-input v-model="dataForm.experimentName" disabled></el-input>
      </el-form-item>
        <p class="part-title" style="margin-top: 5px;">课题任务发布</p>
        <el-form-item label="课题任务:" prop="task">
          <el-input type="textarea":rows="5" v-model="dataForm.task" style="width: 500px;"></el-input>
        </el-form-item>
        <p class="part-title" style="margin-top: 5px;">课题资料共享</p>
        <el-form-item  label="实验资料" prop="file" style="width: 400px;" >
            <a :href="dataForm.file" v-if="disabled" >
              <el-tag>资料下载</el-tag>
            </a>
            <el-button type="primary" @click="tagClose()" size="mini" v-if="disabled">删除</el-button>
          <el-upload
          v-if="!disabled"
            class="upload-demo"
            :on-success="handleAvatarSuccess"
            :action="saveImg()"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :file-list="fileList">
            <el-button size="small" type="primary">点击上传资料</el-button>
          </el-upload>
        </el-form-item>
        <p class="part-title" style="margin-top: 5px;">聊天室开设时间变更</p>
          <el-form-item label="开设时间:" >
          <el-date-picker v-model="time" type="datetimerange" value-format="yyyy-MM-dd HH:mm:ss" prop="time"
           range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" align="right">
          </el-date-picker>
          </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button plain size="small" @click="dataFormCancel()">取消</el-button>
      <el-button type="warning" plain size="small" @click="dataFormReset()">重置</el-button>
      <el-button type="primary" plain size="small" @click="dataFormSubmit()">确定</el-button>
    </span>
  </span>
  </div>
  </el-dialog>
</template>

<script>
 /* eslint-disable */
 // import UploadImage from '../../compont/upload-image.vue'

  export default {
    // components: {UploadImage},

      data () {
        return {
          id:'',
          visible: false,
          dataForm: {
            experimentName: '',
            task: '',
            file: '',
            startTime: '',
            endTime: ''
          },
          disabled: true,
          time:[],
          fileList: [],
          files:[]
        }
      },
      methods: {
        // 保存图片
        saveImg(){
          return this.$http.adornUrl('/file/image');
        },
        handleRemove(file, fileList) {
          fileList.push(file);
        },
        handlePreview(file) {
          fileList.remove(file)
        },
        dataFormCancel () {
          this.visible = false
        },
        dataFormReset () {
          this.disabled = true,
          this.dataFormDetail()
        },
        tagClose () {
          this.disabled = false
          this.dataForm.file = ''
        },
        uploadImg() {
          return this.$http.adornUrl('/file/image');
        },
        handleAvatarSuccess(response) {
          if (response.success) {
            this.files.push(response.data)
          }else{
            this.$message.error(response.message)
          }
         },
         //查询详情信息
         dataFormDetail () {
           this.$http({
             url: this.$http.adornUrl('/task/queryTask'),
             method: 'get',
             params: this.$http.adornParams({
               'id': this.id
             })
           }).then(({data}) => {
               if (data.success) {
                 this.dataForm = data.data
                 this.time = [data.data.startTime, data.data.endTime]
               }else{
                 this.$message.error(data.message)
               }
             })
         },

        // 表单提交
        dataFormSubmit () {
              this.$http({
                url: this.$http.adornUrl('/task/editTask'),
                method: 'post',
                data: this.$http.adornData({
                  'id': this.id,
                  'task': this.dataForm.task,
                  'file': this.dataForm.file,
                  'startTime': this.time[0],
                  'endTime': this.time[1]
                })
              }).then(({data}) => {
                if (data.success) {
                  this.$message({
                    message: '操作成功',
                    type: 'success',
                    duration: 1500,
                    onClose: () => {
                      this.visible = false
                      this.$nextTick(() => {
                      this.$emit('refreshDataList')
                      })
                    }
                  })
                } else {
                  this.$message.error(data.msg)
                }
              })
          },
        init (id) {
          this.id = id
          this.visible = true
          this.dataFormDetail()
        }
      }
    }
</script>

<style scoped>
  .part-title {
      margin: 20px 0;
      color: #000;
      padding-left: 1em;
      font-size: 16px;
      position: relative;
      display: inline-block;
      width: 100%;
  }
  .part-title:before{
    content: "";
    position: absolute;
    left: 0;
    top: 4px;
    width: 3px;
    height: 1em;
    background-color: #4976e8;
  }
 .text {
    font-size: 14px;
  }
  .item {
    padding: 9px 0;
  }
  .box-card {
    width: 480px;
  }
  .chart-box {
    min-height: 400px;
  }
  .info {
    font-size: 16px;
    margin-bottom: 20px;
  }
  .isShow {
  	display: none;
  }
  .item_bock {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height:94px;
    width: 300px;
    padding:0px 24px 0px 38px;
    border-bottom: 1px solid #f7f7f7;
    background: #fff;
  }
  .head_p {
    height:132px;
  }
  .head_img{
    height: 90px;
  }
  .head_img img{
    width:90px;
    height:90px;
    border-radius:50px
  }
  .account {
    font-size: 16px;
    margin-left: 50px;
  }
   .avatar-uploader .el-upload {
      border: 1px dashed #d9d9d9;
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
      border-color: #409EFF;
    }
    .avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 178px;
      height: 178px;
      line-height: 178px;
      text-align: center;
    }
    .avatar {
      width: 178px;
      height: 178px;
      display: block;
    }
    .el-button--primary {
         color: #fff;
         background-color: #273471 !important;
         border-color: #273471 !important;
     }
</style>
